<template>
  <div id="gantt-content">
    <!-- 首行 -->
    <div class="parent">
      <!-- 成员,剩余人天 -->
      <div class="content-name">
        <div @click="handleExpand" style="margin-right: 10px">
          <img class="icon-btn" v-if="!tog" src="./svg/CaretRight.svg" />
          <img class="icon-btn" v-if="tog" src="./svg/CaretBottom.svg" />
        </div>
        <div
          class="pic"
          v-if="props.contentData.avatar"
          :style="{ backgroundImage: props.contentData.avatar }"
        ></div>
        <div>
          {{ source.name }}
        </div>
      </div>
      <template v-if="extraCollumns">
        <div
          class="content-name2"
          v-for="(item, index) in props.options.extraColumns"
          :key="index"
        >
          {{ source[item.parentKey] }}
        </div>
      </template>
      <!-- 画图区域 -->
      <div class="draw-zone">
        <div
          v-for="i in 11"
          class="small-stra"
          :style="{ left: i * 8.33 + '%' }"
        ></div>
        <div class="current" :style="{ width: todayAndLeftDateGap }"></div>
        <!-- 父级GANTT图 -->
        <div
          class="parent-bar"
          v-for="(item, index) in source.timeArray"
          :key="index"
          :style="{
            left: parentLeft[index],
            width: parentLength[index],
            backgroundColor:
              props.options && props.options.parentGanttBarColor
                ? props.options.parentGanttBarColor
                : 'rgba(0, 92, 218, 0.28)',
            height: parentHeight,
            top: parentTop,
          }"
        ></div>
      </div>
    </div>
    <!-- 非首行 -->
    <template v-if="tog">
      <div class="child" v-for="(item, index) in source.children" :key="index">
        <template v-if="!item.hide">
          <div class="content-name" :title="item.name">{{ item.name }}</div>
          <!-- <div class="content-name2"></div> -->
          <template
            v-if="
              props.options &&
              props.options.extraColumns &&
              props.options.extraColumns.length > 0
            "
          >
            <div
              class="content-name2"
              v-for="(sitem, sindex) in props.options.extraColumns"
              :key="sindex"
            >
              {{ item[sitem.childKey] }}
            </div>
          </template>
          <!-- 画图区域 -->
          <div class="draw-zone">
            <div
              v-for="i in 11"
              class="small-stra"
              :style="{ left: i * 8.33 + '%' }"
            ></div>
            <div class="current" :style="{ width: todayAndLeftDateGap }"></div>
            <!-- 子级GANTT图 -->
            <template v-if="childLeft.length > 0 && childLength.length > 0">
              <div
                class="child-bar"
                v-for="(subItem, subIndex) in item.timeArray"
                :key="subIndex"
                :style="{
                  left: childLeft[index][subIndex],
                  width: childLength[index][subIndex],
                  backgroundColor:
                    props.options && props.options.childGanttBarColor
                      ? props.options.childGanttBarColor
                      : '#005cda',
                  height: childHeight,
                  top: childTop,
                }"
              ></div>
            </template>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>
<script setup name="GanttContent">
import { ref } from "vue";
import { diffDay, isBefore } from "./timeformat.js";
const MIN_TOP = '14px';
const MIN_HEIGHT = '12px';

const childHeight = computed(() =>
  props.options && props.options.childGanttBarHeight < 40
    ? props.options.childGanttBarHeight + "px"
    : MIN_HEIGHT
);
const childTop = computed(() =>
  props.options && props.options.childGanttBarHeight < 40
    ? (40 - props.options.childGanttBarHeight) / 2 + "px"
    : MIN_TOP
);
const extraCollumns = computed(
  () =>
    props.options &&
    props.options.extraColumns &&
    props.options.extraColumns.length > 0
);
const parentHeight = computed(() =>
  props.options && props.options.parentGanttBarHeight < 56
    ? props.options.parentGanttBarHeight + "px"
    : MIN_HEIGHT
);
const parentTop = computed(() =>
  props.options && props.options.parentGanttBarHeight < 56
    ? (56 - props.options.parentGanttBarHeight) / 2 + "px"
    : MIN_TOP
);
function wetherSame(p1, p2) {
  if (p1 == p2) {
    return true;
  } else {
    return false;
  }
}
const props = defineProps({
  contentData: {
    type: Object,
    required: false,
  },
  leftMonth: {
    type: String,
    required: false,
  },
  leftYear: {
    type: String,
    required: false,
  },
  rightMonth: {
    type: String,
    required: false,
  },
  rightYear: {
    type: String,
    required: false,
  },
  options: {
    type: Object,
    required: false,
  },
});
const leftDate = ref("");
const rightDate = ref("");
const parentLength = ref([]);
const parentLeft = ref([]);
const childLeft = ref([]);
const childLength = ref([]);
const tog = ref();
const source = ref({});
const todayAndLeftDateGap = ref("");

function handleExpand() {
  tog.value = !tog.value;
}
function init() {
  leftDate.value = props.leftYear + "-" + props.leftMonth + "-" + "01";
  let days = new Date(props.rightYear, props.rightMonth, 0).getDate() + "";
  rightDate.value = props.rightYear + "-" + props.rightMonth + "-" + days;

  //0.计算今日和左侧的gap
  let gapp = diffDay(leftDate.value);
  todayAndLeftDateGap.value = gapp / 365 + "%";

  //1.对时间是null的进行处理
  source.value = Object.assign({}, props.contentData);
  let array = [];
  source.value.children.forEach((sitem) => {
    if (sitem.timeArray && sitem.timeArray.length > 0) {
      sitem.timeArray.forEach((ssitem) => {
        let o = {};
        let start = ssitem.startTime;
        let end = ssitem.endTime;
        if (!start) {
          start = leftDate.value;
          ssitem.startTime = leftDate.value;
        }
        if (!end) {
          end = rightDate.value;
          ssitem.endTime = rightDate.value;
        }
        o.startTime = start;
        o.endTime = end;
        array.push(o);
      });
    }
  });
  //2.父级timeArray绘制
  source.value.timeArray = array;
  //计算父级  总长度840
  source.value.timeArray.forEach((item) => {
    /**
     * 长度计算:
     * 1.结束时间在左侧左,开始时间在右侧右,则left,width都是0 结束.isbefore(左)||相等 ||  开始.isafter(右)||==
     * 2.开始左侧左,结束右侧右,width---100%,left--0       开始.isbefore(左)||相等 &&  结束.isafter(右)||相等
     * 3.开始左侧左,结束右侧左 ,left---0  width计算=(结束时间-左侧时间)*364*840
     *
     * 4.开始左侧右边,结束右侧左---下面计算
     * 5.开始左侧有右边,结束右侧右边----left (开始-左侧)   长度(右侧-开始)
     */
    let endBeforeLeft = isBefore(item.endTime, leftDate.value);
    let startAfterRight = !isBefore(item.startTime, rightDate.value);
    let startBeforeLeft = isBefore(item.startTime, leftDate.value);
    let endAfterRight = !isBefore(item.endTime, rightDate.value);
    let endBeforeRight = isBefore(item.endTime, rightDate.value);
    let startAfterLeft = !isBefore(item.startTime, leftDate.value);
    if (
      endBeforeLeft ||
      wetherSame(item.endTime, leftDate.value) ||
      startAfterRight ||
      wetherSame(item.startTime, rightDate.value)
    ) {
      parentLeft.value.push("0px");
      parentLength.value.push("0px");
    } else if (
      (startBeforeLeft || wetherSame(item.startTime, leftDate.value)) &&
      (endAfterRight || wetherSame(item.endTime, rightDate.value))
    ) {
      parentLeft.value.push("0px");
      parentLength.value.push("100%");
    } else if (
      (startBeforeLeft || wetherSame(item.startTime, leftDate.value)) &&
      (endBeforeRight || wetherSame(item.endTime, rightDate.value))
    ) {
      parentLeft.value.push("0px");
      let duration = diffDay(leftDate.value, item.endTime);
      parentLength.value.push((duration * 100) / 365 + "%");
    } else if (
      (startAfterLeft || wetherSame(item.startTime, leftDate.value)) &&
      (endBeforeRight || wetherSame(item.endTime, rightDate.value))
    ) {
      let durationDays = diffDay(item.startTime, item.endTime);
      parentLength.value.push((durationDays * 100) / 365 + "%");
      let gap = diffDay(leftDate.value, item.startTime);
      parentLeft.value.push((gap * 100) / 365 + "%");
    } else if (
      (startAfterLeft || wetherSame(item.startTime, leftDate.value)) &&
      (endAfterRight || wetherSame(item.endTime, rightDate.value))
    ) {
      let gap2 = diffDay(leftDate.value, item.startTime);
      parentLeft.value.push((gap2 * 100) / 365 + "%");
      let durationDays2 = diffDay(item.startTime, rightDate.value);
      parentLength.value.push((durationDays2 * 100) / 365 + "%");
    }
  });
  //计算子级  总长度840
  source.value.children.forEach((unit) => {
    let arrayLeft = [];
    let arrayLength = [];
    unit.timeArray.forEach((item) => {
      let endBeforeLeft = isBefore(item.endTime, leftDate.value);
      let startAfterRight = !isBefore(item.startTime, rightDate.value);
      let startBeforeLeft = isBefore(item.startTime, leftDate.value);
      let endAfterRight = !isBefore(item.endTime, rightDate.value);
      let endBeforeRight = isBefore(item.endTime, rightDate.value);
      let startAfterLeft = !isBefore(item.startTime, leftDate.value);

      if (
        endBeforeLeft ||
        wetherSame(item.endTime, leftDate.value) ||
        startAfterRight ||
        wetherSame(item.startTime, rightDate.value)
      ) {
        arrayLeft.push("0px");
        arrayLength.push("0px");
      } else if (
        (startBeforeLeft || wetherSame(item.startTime, leftDate.value)) &&
        (endAfterRight || wetherSame(item.endTime, rightDate.value))
      ) {
        arrayLeft.push("0px");
        arrayLength.push("100%");
      } else if (
        (startBeforeLeft || wetherSame(item.startTime, leftDate.value)) &&
        (endBeforeRight || wetherSame(item.endTime, rightDate.value))
      ) {
        arrayLeft.push("0px");
        const duration = diffDay(leftDate.value, item.endTime);
        arrayLength.push((duration * 100) / 365 + "%");
      } else if (
        (startAfterLeft || wetherSame(item.startTime, leftDate.value)) &&
        (endBeforeRight || wetherSame(item.endTime, rightDate.value))
      ) {
        const durationDays3 = diffDay(item.startTime, item.endTime);
        arrayLength.push((durationDays3 * 100) / 365 + "%");
        const gap = diffDay(leftDate.value, item.startTime);
        arrayLeft.push((gap * 100) / 365 + "%");
      } else if (
        (startAfterLeft || wetherSame(item.startTime, leftDate.value)) &&
        (endAfterRight || wetherSame(item.endTime, rightDate.value))
      ) {
        const gap2 = diffDay(leftDate.value, item.startTime);
        arrayLeft.push((gap2 * 100) / 365 + "%");
        const durationDays2 = diffDay(item.startTime, rightDate.value);
        arrayLength.push((durationDays2 * 100) / 365 + "%");
      }
    });
    //增加是否显示判断
    let isHide = true;
    arrayLength.forEach((i) => {
      if (i !== "0px") {
        isHide = false;
      }
    });
    unit.hide = isHide;
    childLeft.value.push(arrayLeft);
    childLength.value.push(arrayLength);
  });
}
init();
</script>

<style scoped>
.parent {
  width: 100%;
  overflow: hidden;
}
.content-name {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 56px;
  width: 120px;
  text-align: left;
  line-height: 56px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #e6e8eb;
  border-right: 1px solid #e6e8eb;
  float: left;
}
.content-name2 {
  height: 56px;
  width: 71px;
  text-align: center;
  line-height: 56px;
  font-size: 14px;
  font-weight: 500;
  border-right: 1px solid #e6e8eb;
  border-bottom: 1px solid #e6e8eb;
  color: #005cda;
}

.draw-zone {
  border-bottom: 1px solid #e6e8eb;
  height: 56px;
  position: relative;
  margin-left: 120px;
}

.draw-zone .current {
  border-right: 1px dashed #cb7a00;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
}
.draw-zone .small-stra {
  background-color: #f0f2f5;
  width: 1px;
  height: 56px;
  position: absolute;
  top: 0px;
}
.draw-zone .parent-bar {
  position: absolute;
}

.child {
  overflow: hidden;
}
.child .content-name {
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 24px;
  border-bottom: 1px solid #e6e8eb;
  border-right: 1px solid #e6e8eb;
}
.child .content-name2 {
  height: 40px;
  width: 71px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  font-weight: 500;
  border-right: 1px solid #e6e8eb;
  border-bottom: 1px solid #e6e8eb;
  color: #005cda;
}
.child .draw-zone {
  border-bottom: 1px solid #e6e8eb;
  height: 40px;
  position: relative;
}
.child .current {
  border-right: 1px dashed #cb7a00;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
}
.child .small-stra {
  background-color: #f0f2f5;
  width: 1px;
  height: 40px;
  position: absolute;
  top: 0px;
}
.child .child-bar {
  position: absolute;
}
.pic {
  height: 28px;
  width: 28px;
  margin-right: 10px;
  background: #f5f7fa url(./svg/user.jpg);
  background-size: cover;
}

.icon-btn {
  width: 20px;
  height: 20px;
  margin-top: 20px;
  cursor: pointer;
}
</style>
